<template>
	<view class="bxo">
		<view class="bxo1">
			<view class="bxo1left">
				<image src="/static/image/狗.jpg" mode="" />
			</view>
			<view class="bxo1right">
				<view class="bxo1right1">
					店铺名称 1522202232
					<uv-icon name="arrow-right" size="16px"></uv-icon>
				</view>
				<view class="bxo1right2">
					济南市历下区工业南路山钢新天地15层慧族软件
				</view>
			</view>
		</view>
		<view class="bxo2">
			<view class="bxo22" v-for="item in list" :key="item.id">{{item.text}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const list = ref(
		[{
				id: 1,
				text: " "
			},
			{
				id: 2,
				text: " "
			},
			{
				id: 3,
				text: " "
			},
			{
				id: 4,
				text: " "
			},
			{
				id: 5,
				text: " "
			},
			{
				id: 6,
				text: " "
			},
			{
				id: 7,
				text: " "
			},
			{
				id: 8,
				text: " "
			},
			{
				id: 9,
				text: " "
			},
			{
				id: 10,
				text: " "
			},
			{
				id: 11,
				text: " "
			},
			{
				id: 12,
				text: " "
			},
			{
				id: 13,
				text: " "
			},
			{
				id: 14,
				text: " "
			}
		]
	)
</script>

<style lang="scss">
	.bxo {
		background-color: #fff;

		.bxo1 {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			bxo-sizing: border-bxo;

			.bxo1left {
				width: 15%;
				height: 100rpx;
				

				bxo-sizing: border-bxo;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.bxo1right {
				width: 83%;
				font-size: 30rpx;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;

				.bxo1right1 {
					width: 100%;
					display: flex;
					justify-content: space-between;
				}

				.bxo1right2 {
					width: 100%;
					color: #636363;
					font-size: 24rpx;
				}
			}
		}

		.bxo2 {
			display: flex;
			color: #fff;

			.bxo22 {
				width: 45rpx;
				height: 10rpx;
				transform: skewX(-45deg);
				background-color: #fad0d3;
				margin-right: 15rpx;
			}

			.bxo22:nth-child(odd) {
				background-color: #fad0d3;
			}

			.bxo22:nth-child(even) {
				background-color: #d4ddfc;
			}
		}
	}
</style>